<script setup>
import { ref } from 'vue'

import {
  addXin,
  updateXin
} from '@/api/XinWen'
// 表单显示隐藏
const dialogVisible = ref(false)
// 校验 rules表单数据
const formRef = ref()
// 弹窗数据
const XinWenForm = ref({
  stem: '',
  author: '',
  content: '',
  views: '',
  likeCount: '',
  subjectName: ''
})
const rules = {
  stem: [
    { required: true, message: '请输入新闻标题', trigger: 'blur' },
    {
      pattern: /^\S{1,10}$/,
      message: '新闻标题不合法哦!! 标题长度必须在 1-10 个字符之间',
      trigger: 'blur'
    }
  ],
  author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
  content: [{ required: true, message: '请输入具体内容', trigger: 'blur' }],
  views: [
    { required: true, message: '请输入指定浏览量', trigger: 'change' }
  ],
  likeCount: [
    { required: true, message: '请输入指定喜欢人数', trigger: 'blur' },
    { typeof: 'number', message: '喜欢人数必须为数字', trigger: 'blur' }
  ],
  subjectName: [{ required: true, message: '请输入指定类别', trigger: 'blur' }]
}

// 子传父 进行 更新
const emit = defineEmits(['success'])

const onSubmit = async() => {
  await formRef.value.validate()
  const isEdit = XinWenForm.value.id
  if (isEdit) {
    await updateXin(XinWenForm.value)
  } else {
    await addXin(XinWenForm.value)
  }
  dialogVisible.value = false
  emit('success')
  formRef.value.resetFields() // 重置表单内容 回归之前状态
}
// 组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
// open({})  => 表单无需渲染，说明是添加
// open({ id, cate_name, ... })  => 表单需要渲染，说明是编辑
// open调用后，可以打开弹窗

const open = (row) => {
  // 打开弹窗
  dialogVisible.value = true
  // 添加 → 重置了表单内容，
  // 编辑 → 存储了需要回显的数据
  XinWenForm.value = { ...row }
}

// 向外暴露方法
defineExpose({
  open
})

</script>
<!-- 新闻编辑弹窗 组件 -->

<template>
  <el-dialog 
  v-model="dialogVisible" 
  :title="XinWenForm.id ? '编辑分类' : '添加分类'" 
  width="30%">
    <el-form ref="formRef" :model="XinWenForm" :rules="rules" label-width="100px" style="padding-right: 30px">
      <el-form-item label="新闻标题" prop="stem">
        <el-input v-model="XinWenForm.stem" placeholder="请输入新闻标题"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="XinWenForm.author" placeholder="请输入作者"></el-input>
      </el-form-item>
      <el-form-item label="具体内容" prop="content">
        <el-input v-model="XinWenForm.content" placeholder="请输入指定具体内容"></el-input>
      </el-form-item>
      <el-form-item label="浏览量" prop="views">
        <el-input v-model="XinWenForm.views" placeholder="请输入指定浏览量"></el-input>
      </el-form-item>
      <el-form-item label="喜欢人数" prop="likeCount">
        <el-input v-model="XinWenForm.likeCount" placeholder="请输入指定喜欢人数"></el-input>
      </el-form-item>
      <el-form-item label="文章类别" prop="subjectName">
        <el-input v-model="XinWenForm.subjectName" placeholder="请输入指定文章类别"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button :plain="true" type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
